﻿@using StarBlog.Share.Extensions
@model HomeViewModel
@{
    ViewData["Title"] = "Home Page";
}

<div class="container col-xxl-8 py-3">
    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
        <div class="col-10 col-sm-8 col-lg-6">
            @if (Model.RandomPhotoVisible) {
                @if (Model.RandomPhoto != null) {
                    <partial name="Widgets/PhotoCardSmallPure" model="@Model.RandomPhoto"/>
                }
                else {
                    <img src="~/images/bootstrap/bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes"
                         width="700" height="500" loading="lazy">
                }
            }
            @if (Model.ChartVisible) {
                <canvas class="my-4 w-100" id="myChart" height="400"></canvas>
            }
        </div>
        <div class="col-lg-6">
            <h1 class="display-5 fw-bold lh-1 mb-3">DealiAxy's Blog</h1>
            <div class="lead">
                <p>一句诗：{{poemSimple}}</p>
                <p>一言：{{hitokoto}}</p>
            </div>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                <a class="btn btn-primary btn-lg px-4" asp-controller="Blog" asp-action="RandomPost">看文</a>
                <a class="btn btn-outline-secondary btn-lg px-4" asp-controller="Photography" asp-action="RandomPhoto">看图</a>
                @if (Model.ChartVisible) {
                    <button class="btn btn-outline-secondary btn-lg px-4" @@click="switchChartType">切换图表</button>
                }
            </div>
        </div>
    </div>
</div>

<div class="container px-4 py-3" id="custom-cards">
    <h2 class="pb-2 border-bottom">Photography</h2>

    @if (Model.FeaturedPhotos.Any()) {
        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
            @foreach (var photo in Model.FeaturedPhotos) {
                <div class="col">
                    <partial name="Widgets/PhotoCardSmall" model="photo"/>
                </div>
            }
        </div>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐图片")
    }

</div>

<div class="container px-4 py-3" id="featured-3">
    <h2 class="pb-2 border-bottom">Blog Categories</h2>
    @if (Model.FeaturedCategories.Any()) {
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            @foreach (var fc in Model.FeaturedCategories) {
                @await Html.PartialAsync("Widgets/FeaturedCategoryCard", fc)
            }
        </div>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐分类")
    }

</div>

<div class="container px-4 py-3">
    <h2 class="pb-2 border-bottom">Blog Posts</h2>

    @if (Model.TopPost != null) {
        <partial name="Widgets/TopPostCard" model="Model.TopPost"/>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "置顶博客")
    }


    @if (Model.FeaturedPosts.Any()) {
        <div class="row mb-2">
            @foreach (var post in @Model.FeaturedPosts) {
                <partial name="Widgets/FeaturedPostCard" model="post"/>
            }
        </div>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "推荐博客")
    }
</div>

<div class="container px-4 py-3">
    <div class="d-flex justify-content-between mb-2 border-bottom">
        <h2>友情链接</h2>
        <a class="btn btn-link" asp-controller="LinkExchange" asp-action="Add">申请友链</a>
    </div>
    @if (Model.Links.Any()) {
        <div class="d-grid gap-2 d-md-block">
            @foreach (var link in Model.Links) {
                @await Html.PartialAsync("Widgets/ColorfulButton",
                           new ColorfulButtonViewModel {Name = link.Name, Url = link.Url, Tooltips = link.Description})
            }
        </div>
    }
    else {
        @await Html.PartialAsync("Widgets/PlaceholderCard", "友情链接")
    }
</div>

@section bottom {
    <script src="~/lib/chart.js/dist/chart.min.js"></script>
    @if (Model.ChartVisible) {
        <script>const CHART_VISIBLE = true</script>
    }
    else {
        <script>const CHART_VISIBLE = false</script>
    }
    <script type="module" src="~/js/home.js"></script>
}